g  <template>
  <div>
    <div>
      <el-input
        placeholder="请输入内容"
        style="width:300px;float:right"
        v-model="search"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search" @click="onSearch(search)"></el-button>
      </el-input>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="_id" label="id"></el-table-column>
      <el-table-column prop="username" label="账号"></el-table-column>
      <el-table-column prop="name" label="用户名"></el-table-column>
      <el-table-column label="权限">
        <template slot-scope="scope">
          <!-- <el-select v-model="scope.row.power" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select> -->
          <el-tag v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            v-show="item.value == scope.row.power"
            :type="item.color"
            >{{item.label}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
          <el-button
            type="text"
            size="small"
            @click="$router.push(`/User/userEdit/${scope.row._id}`)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        style="float:right"
        background
        layout="prev, pager, next"
        :total="pagination.total"
        :page-size="pagination.size"
        :current-page="pagination.current"
        @current-change="currentChange"
      ></el-pagination>
    </div>
  </div>
</template>

  <script>
export default {
  data() {
    return {
      tableData: [],
      pagination: {
        // total: 10,
        // current: 1,
        // size: 5
      },
      search: "",
      options: [
        {
          value: "admin",
          label: "超级管理员",
          color: "success"
        },
        {
          value: "user",
          label: "用户",
          color: "warning"
        },
        {
          value: "no",
          label: "禁用",
          color: "info"
        }
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    onSearch(e) {
      this.getList({ name: e });
    },
    currentChange(e) {
      this.getList({ current: e });
    },
    async getList(pages) {
      let data = {};
      if (pages) {
        data = pages;
      }
      const list = await this.$http.post(`/list/user`, data);
      console.log(list);
      this.pagination = {
        total: list.data.total,
        current: list.data.current,
        size: list.data.size
      };
      this.tableData = list.data.list;
    },
    deleteRow(e) {
      this.$confirm(`此操作将永久删除 ${e.name}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        await this.$http.delete(`/rest/user/${e._id}`);
        this.getList();
        this.$message({
          type: "success",
          message: "删除成功!"
        });
      });
    }
  }
};
</script>